<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form"  prefix="form" %>   
<%@ taglib tagdir="/WEB-INF/tags/byblos/" prefix="byblos" %>
<%@taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c' %>
<!DOCTYPE html>
<html>
<head>
	<title>Byblos | editor form</title>
	<script src="../js/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.validationEngine.js" type="text/javascript" ></script>		
	<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
	<link rel="stylesheet" href="../css/forms.screen.css" type="text/css"/>	
	<script>
		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#formEditor").validationEngine();
			//monjavascript
			jQuery("#uploadLogo").click(function() {
				jQuery("#div_form_upload_logo").show();
			});
			jQuery("#image_file").change(function(){
				    var oFile = jQuery('#image_file')[0].files[0];
				    jQuery('.errorUpload').hide();
			    	jQuery('#uploadFile').hide();
				    var rFilter = /^(image\/jpeg|image\/png)$/i;
				    if (! rFilter.test(oFile.type)) {
				    	jQuery('.errorUpload').html('Please select a valid image file (jpg and png are allowed)').show();
				    	return;
				    }
				    if (oFile.size > 250 * 1024) {
				    	jQuery('.errorUpload').html('You have selected too big file, please select a one smaller image file').show();
				    	return;
				    }	
			    	jQuery('#uploadFile').show();
			});
			jQuery(".formClose").click(function(){
				jQuery("#div_form_upload_logo").hide();				
			});
		});
		
	</script>

</head>

<body>
	<div id="div_form_editor">
		<h2>Editor form</h2>
   		<byblos:form action="editorSubmit" modelAttribute="editor" id="formEditor"  method="post">		
		  <fieldset>
			<p><byblos:input path="editorName" label="Editor name" type="text" clas="validate[required]"/> </p>
			<p><byblos:input path="editorWeb" label="Website" type="text" clas="validate[custom[url]]"/> </p>			
			<p><byblos:input path="editorLogo" label="Logo" type="text" clas="" isvisible="true"/> </p>	
<%-- 			<p><byblos:input path="editorLogo" label="Please select image file" type="file" clas=""/> </p>	 --%>
			<p><input type="button"  id="uploadLogo" value="Upload logo"></p>			
			<input type="submit" value="Add editor" />
		  </fieldset>	
		</byblos:form>
		
		<div id="div_form_upload_logo">
			<div id="wrapperClose"><img src="../img/close.jpg" alt="" class="formClose" /></div>
			<h2>Upload image</h2>
	   		<form id="editorUploadLogo" method="post" action="editorUploadLogo" enctype="multipart/form-data">
	   			<input type="file" name="image_file" id="image_file"  />
	   			 <div class="errorUpload"></div>
	   			 <input type="submit" value="Upload" id="uploadFile" name="uploadFile"/>
			</form>   				
		</div>		
	</div>
</body>